<template>
    <div>
        <h2>考试</h2>
        <div>
            <!--<input v-model="searchInfo.queryInfo" @input="queryChange" type="text" placeholder="商品名称" >-->
            <input v-model="searchInfo.queryInfo" type="text" placeholder="商品名称" >
        </div>
        <table>
            <tr>
                <th>编号<arrow @click.native="idSortArr" v-bind:status="idSortStatus"></arrow></th>
                <th>名称</th>
                <th>价格<arrow @click.native="priceSortArr" :status="priceSortStatus"></arrow></th>
            </tr>
            <tr v-for="(item, index) in contentData" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.goods_name}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
        <page :pageSize="searchInfo.pageSize"
              :pageNum="searchInfo.pageNum"
              :total="total"
              @pageNumChange = "pageNumChange"
              @pageSizeChange = "pageSizeChange"
        ></page>
    </div>
</template>
<script>
    import page from "./components/page";
    import arrow from "./components/Arrow.vue";
    import data from "./data";

    export default{
        components: {
            page,
            arrow
        },
        created(){
            this.res = data.data;
//            this.contentData = this.res;
            console.log("data===>",this.res)
        },
        data(){
            //Desc 降序   asc 升序
            return {
                res: null,
                searchInfo: {
                    queryInfo: "",
                    pageSize: 1,
                    pageNum: 1,
                },
                total: 0,
                sortWay: "desc",
                sortBy: "id", //id price
            }
        },
        methods:{
            pageNumChange(pageNum){
                this.searchInfo.pageNum = pageNum;
            },
            pageSizeChange(pageSize){
                this.searchInfo.pageSize = pageSize;
            },
            queryChange(){
                console.log("queryChange", this.searchInfo.queryInfo);

                let queryStr = this.searchInfo.queryInfo;
                /*let newData = [];
                for(let i=0;i<this.res.length;i++){
                    let item = this.res[i];
                    if(item.goods_name.indexOf(queryStr) !== -1){
                        newData.push(item)
                    }
                }
                this.contentData = newData;*/

                /*this.contentData = this.res.filter((item)=>{
                    if(item.goods_name.indexOf(queryStr) !== -1){
                        return item
                    }
                })*/
            },
            idSortArr(){
//                this.sortBy === 'price'
                this.sortBy = 'id'
                if(this.sortWay === "desc"){
                    this.sortWay = "asc"
                }else {
                    this.sortWay = "desc"
                }
//                this.sortArr();
            },
            priceSortArr(){
                    this.sortBy = "price"
                if(this.sortWay === "desc"){
                    this.sortWay = "asc"
                }else {
                    this.sortWay = "desc"
                }
//                this.sortArr();
            },
            sortArr(){
                this.res.sort((a, b)=>{
                    return (a[this.sortBy] - b[this.sortBy]) * (this.sortWay === "desc" ? -1 : 1)
                });
            }
        },
        computed:{
            contentData(){
                let resData = this.res || [];

                //查找过滤
                let queryStr = this.searchInfo.queryInfo;
                resData = this.res.filter((item)=>{
                    if(item.goods_name.indexOf(queryStr) !== -1){
                        return item
                    }
                });

                //排序
                resData.sort((a, b)=>{
                    return (a[this.sortBy] - b[this.sortBy]) * (this.sortWay === "desc" ? -1 : 1)
                });

                this.total = resData.length;

                //分页
//                pageSize
//                pageNum

//                0, 2;
//                2, 4;
//                4, 6;
//                3, 4;
//                4, 5;
//                5, 6;

//                let start1 = 0;//0
//                let start2 = 3;//1*3  3 4 5
//                let start3 = 6;//1*3

                let start = (this.searchInfo.pageNum - 1)*this.searchInfo.pageSize;
                resData = resData.slice(start, start + this.searchInfo.pageSize);

                return resData
            },
            idSortStatus(){
                if(this.sortBy === "id"){
                    return this.sortWay === "desc"? "up" : "down"
                }else{

                    return "none"
                }
            },
            priceSortStatus(){

                if(this.sortBy === "price"){
                    return this.sortWay === "desc"? "up" : "down"
                }else{

                    return "none"
                }
            }
        }
    }
</script>
<style>

</style>